.archive {
  section {
    & > div {
      background-color: var(--bg-second);
      box-shadow: var(--box-shadow);
    }
  }
  .title {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-second);
    text-align: center;
    div {
      margin-bottom: 0;
      &:first-child {
        span {
          font-size: 1.5rem;
        }
      }
      span {
        color: var(--primary-color);
        font-size: 1.1rem;
      }
    }
  }
  .list {
    padding: 1rem 1.3rem;
    h2 {
      color: var(--main-text-color);
      font-size: 1.5rem;
    }
    h3 {
      color: var(--second-text-color);
    }
    .sublist {
      padding: 0.5rem 1rem;
      border-radius: 4px;
      ul {
        padding-left: 2.5rem;
        li {
          position: relative;
          padding: 0.5rem 0;
          &::before {
            position: absolute;
            top: 17px;
            left: -1rem;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-left: -4px;
            background: var(--disable-text-color);
            content: ' ';
          }
          &:hover {
            &::before {
              background: var(--primary-color);
            }
            a > span {
              color: var(--primary-color);
            }
          }
          a {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .time {
              padding-right: 1em;
              margin: 0;
              color: var(--second-text-color);
              font-size: 0.8rem;
            }
            .title {
              color: var(--main-text-color);
              overflow: hidden;
              font-weight: 600;
              font-size: 1rem;
              line-height: 1.4;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
            }
          }
        }
      }
    }
  }
}
